<template>
  <div class="product">
    <nav-bar :title="diamond.name">
      <van-icon
        name="shopping-cart-o"
        :color="variables.black"
        :badge="count"
        size="18"
        @click="cartClick"
      />
    </nav-bar>

    <div class="banner">
      <img :src="diamond.picUrl" width="100%" height="200px" />
    </div>

    <div class="main">
      <!-- <van-empty
        v-if="list.length == 0"
        :image="require('@/assets/custom-empty-image.png')"
        image-size="80"
        description="暂无商品"
      />
      <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <product-item
            v-for="(item, idx) in list"
            :key="idx"
            :goods-id="item.id"
            :img="item.picUrl"
            :title="item.name"
            :desc="item.brief"
            :price="item.nowPrice"
            :price-type="item.priceType"
            :discount="item.counterPrice"
            style="margin-bottom: 6px"
            @getCartGoodsCount="getCartGoodsCount"
          />
        </van-list>
      </van-pull-refresh> -->
      <!-- v-model="refreshing" -->
      <Goods
      
      :goods-list="list"
      :is-finished="finished"
      @onReachBottom="onReachBottom"
    />
    </div>

    <Skeleton v-if="isSkeletonShow" />
  </div>
</template>

<script>
import { getUserSign,getInfo } from '@/api/user'
import { getToken } from '@/utils/auth'
import { getGoodsList } from '@/api/diamond'
import { getCartGoodsCount } from '@/api/cart'
import Goods from './modules/Goods.vue'
import NavBar from '@/components/NavBar'
import ProductItem from '@/components/ProductItem'
import Skeleton from './modules/Skeleton'
import variables from '@/styles/variables.scss'
import { mapGetters } from 'vuex'

export default {
  name: 'Product',
  components: {
    NavBar,
    ProductItem,
    Skeleton,
    Goods
  },
  props: {
    diamondId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      list: [],
      diamond: [],
      initFun: '',
      count: 0,
      pageNo: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      refreshing: false,
      isSkeletonShow: true,
      userInfo:{},
      from:sessionStorage.getItem('from') || ''

    }
  },
  computed: {
    // ...mapGetters(['userInfo']),
    variables() {
      return variables
    }
  },
  async mounted(){
    this.list = []
    this.$toast.loading('加载中')
    if(getToken()){
      console.log('userInfo===',Object.keys(this.userInfo))
        if(Object.keys(this.userInfo).length==0){
          const res = await getInfo()
          this.userInfo = res.map?.info
          this.$set(this,'userInfo',res.map?.info)
        }
      }
    this.pageNo=1
      
    await this.getProductList()
    await this.getCartGoodsCount()
    this.$toast.clear()
  },
  methods: {
    getProductList() {
      getGoodsList({
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        diamondId: this.diamondId
      }).then((res) => {
        const data = res.map.goods
        
        data.forEach(element => {
          element.nowPrice = element.retailPrice
        // info.forEach(element => {
          if (element.priceType === 1) {
            if (this.userInfo.userLevel === 0) {
              element.nowPrice = element.generalPrice
              // element.nextPrice = info.goldPrice || element.retailPrice
            } else if (this.userInfo.userLevel === 1) {
              element.nowPrice = element.goldPrice || element.retailPrice
              // element.nextPrice = info.boardPrice
            } else if (this.userInfo.userLevel === 2) {
              element.nowPrice = element.boardPrice || element.retailPrice
              // element.nextPrice = info.ceoPrice
            } else if (this.userInfo.userLevel === 3) {
              element.nowPrice = element.ceoPrice || element.retailPrice
            }else{
              element.nowPrice = element.generalPrice
            }
          } else if (element.priceType === 2) {
            element.nowPrice = element.pointPrice + '积分'
          } else if (element.priceType === 3) {
            element.nowPrice = element.retailPrice
            element.pointPrice = element.pointPrice
            element.priceType =3
          }else{
            element.nowPrice = element.retailPrice
          }
          element.picUrl =element.picUrl+'?imageView2/1/w/600/h/600'
          console.log(element)
        })
        console.log(this.userInfo)
        res.map.diamond.picUrl +='?imageView2/1/w/750/h/400'
        this.diamond = res.map.diamond
        if (this.refreshing) {
          this.list = data
          this.refreshing = false
        } else {
          
          if(this.pageNo ==1){
            this.list = [...data]
          }else{
            this.list = [...this.list, ...data]
          }
          
        }
        if (data.length < this.pageSize && this.list.length > 0) {
            this.finished = true
          }

        this.loading = false
        this.isSkeletonShow = false
      })
    },
    getCartGoodsCount() {
      getCartGoodsCount()
        .then((res) => {
          
          const { count } = res.map
          this.count = count
        })
        .catch((e) => {})
    },
    onLoad() {
      this.loading = true
      this.getProductList()
    },
    onRefresh() {
      this.refreshing = true
      this.pageNo = 1
      this.getProductList()
    },
    onReachBottom() {
      this.pageNo += 1
      this.getProductList()
    },
    cartClick() {
      this.$router.push({ name: 'Cart' })
    }
  }
}
</script>

<style lang="scss" scoped>
.product {
  min-height: 100vh;
  background: #f5f5f5;
}
.main {
  padding: 2vw 0 0 0;
}
</style>
